<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>购物车</title>
    <link rel="stylesheet" href="/static/client/style.css">
</head>
<body>
    <!-- 头部 -->
    <header class="cart-header">
        <!-- 将返回按钮替换为 < 符号，设置颜色为白色 -->
        <a href="javascript:history.back()">
            <span class="back-symbol">&lt;</span>
        </a>
        <h1>菩提阁</h1>
    </header>
    <!-- 主内容区域 -->
    <main class="cart-main">
        <!-- 地址信息 -->
        <div class="address-section">
            <h2>收货地址</h2>
            <p class="address">示例地址，详细到门牌号</p>
            <hr>
            <p class="contact">收货人: 张三  电话: 13800138000</p>
            <hr>
            <p class="delivery-time">预计送达时间: 12:00 - 12:30</p>
        </div>
        <!-- 订单明细 -->
        <div class="order-details">
            <h2>订单明细</h2>
            <!-- 添加购物车商品列表容器 -->
            <div class="cart-items"></div> 
            <div class="order-item">
                <!-- 修改图片 src 属性为 noImg.png -->
                <img src="/static/client/images/noImg.png" alt="商品图片">
                <div class="item-info">
                    <p class="item-name">上汤焗龙虾</p>
                    <p class="item-quantity">x1</p>
                </div>
                <p class="item-price">¥ 1088</p>
            </div>
        </div>
        <!-- 备注 -->
        <div class="remarks-section">
            <h2>备注</h2>
            <textarea placeholder="请输入您需要备注的信息"></textarea>
        </div>
    </main>
    <!-- 底部支付栏 -->
    <footer class="bottom-payment-bar">
        <div class="left-content">
            <img src="/static/client/images/cart_active.png" alt="送货员">
            <span class="order-badge">1</span>
            <span class="total-amount">¥ 1088</span>
        </div>
        <button class="pay-btn">去支付</button>
    </footer>
    <script src="/static/client/script.js"></script>
</body>
</html>
